<template>
    <div>
        <global-tables
            @handleAllSelect="handleAllSelect"
            @changePage="handleChangePage"
            :list="list"
            :total="total"
            :loading="loading"
            :columns="columns"
            :current="search.Page"
        >
            <Form :model="search" :label-width="80">
                <div class="table-top-wrap">
                    <div>
                        <div>
                            <Button v-if="isAddBtn" class="features-btn" @click="handleBtnClick(null,'add')">
                                <Icon type="md-add" size="18" />新建
                            </Button>
                            <Button v-if="isDelete" class="features-btn btn-auto-m" @click="handleBtnClick(null,'delete')">
                                <Icon type="md-trash" size="17" />禁用
                            </Button>
                            <Button v-if="isDelete" class="features-btn btn-auto-m" @click="handleBtnClick(null,'recovery')">
                                <Icon type="md-trash" size="17" />恢复
                            </Button>
                        </div>
                    </div>
                    <div class="table-top-wrap-bottom">
                        <div>
                            <input type="text" class="style-input" @keyup.enter="handleSearch" v-model="search.keyword" placeholder="请输入服务名称" />
                            <i-input style="display:none"></i-input>
                        </div>
                        <div>
                            <Button icon="ios-search" @click="handleSearch" class="search-btn">搜索</Button>
                        </div>
                    </div>
                </div>
            </Form>
        </global-tables>
        <Modal :mask-closable="false" v-model="isModal" :title="ModalTitle" width="800">
            <div v-if="isModal">
                <Form ref="formItem" :model="formItem" :rules="ruleValidate" :label-width="80">
                    <Row>
                        <i-col :lg="{ span: 12}">
                            <FormItem label="标题" prop="Dname1">
                                <i-input v-model="formItem.Dname1" placeholder="请输入标题"></i-input>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 12}">
                            <FormItem label="英文" prop="Dname2">
                                <i-input v-model="formItem.Dname2" placeholder="请输入英文"></i-input>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 12}">
                            <FormItem label="副标题" prop="Dname3">
                                <i-input v-model="formItem.Dname3" placeholder="请输入副标题"></i-input>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 24}">
                            <FormItem label="服务图片 750 * 400">
                                <img-upload
                                    v-if="isImg"
                                    :defaultList="imgDefaultList.YBCode"
                                    @delImgList="delImgList"
                                    :multiple="false"
                                    :data="{directory:'NewsPath'}"
                                    :check="1"
                                    :value="'YBCode'"
                                    @setImgLIst="setImgLIst"
                                ></img-upload>
                            </FormItem>
                        </i-col>
                    </Row>
                </Form>
            </div>
            <div slot="footer">
                <Button size="large" @click="handleClose">取消</Button>
                <Button type="primary" size="large" @click="handleSubmit('formItem')">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
/**
 * 品牌列表
 */
import { cyclicRouting, getdate } from '@/util'
import { getModulePermission } from '@/api/user'
import GlobalTables from '@/components/GlobalTables'
import Editor from '@/components/Editor'
import ImgUpload from '@/components/ImgUpload'
import Api from './service'

export default {
    name: 'ProductsBrand',
    components: {
        GlobalTables,
        Editor,
        ImgUpload
    },
    data() {
        return {
            isImg: true,
            imglist: {
                YBCode: []
            },
            imgDefaultList: {
                YBCode: []
            },
            list: [],
            total: 0,
            itemId: 0,
            loading: true,
            isDelete: false,
            isAddBtn: false,
            isProhibit: false,
            isModal: false,
            allSelectArr: null,
            ModalTitle: '',
            formItem: this.initFormItem(),
            search: {
                keyword: '',
                pageindex: 1,
                pagesize: 10
            },
            ruleValidate: {
                Dname1: [
                    {
                        required: true,
                        message: '请输入服务名称',
                        trigger: 'change'
                    }
                ],
                Dname2: [
                    {
                        required: true,
                        message: '请输入服务名称',
                        trigger: 'change'
                    }
                ],
                Dname3: [
                    {
                        required: true,
                        message: '请输入服务名称',
                        trigger: 'change'
                    }
                ]
            },
            /* 表头 */
            columns: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    title: '名称',
                    align: 'center',
                    render: (h, params) => {
                        const { Dname, DeleteMark } = params.row
                        if (DeleteMark) {
                            return h('div', [
                                h(
                                    'span',
                                    {
                                        style: {
                                            color: '#cccccc'
                                        }
                                    },
                                    `${Dname}`
                                )
                            ])
                        } else {
                            return h('div', [
                                h(
                                    'span',
                                    {
                                        style: {}
                                    },
                                    `${Dname}`
                                )
                            ])
                        }
                    }
                },
                {
                    title: '图片',
                    width: 100,
                    align: 'center',
                    render: (h, params) => {
                        const { YBCode } = params.row
                        return h('div', [
                            h('Avatar', {
                                props: {
                                    src: YBCode,
                                    shape: 'square',
                                    size: 'large'
                                },
                                style: {
                                    margin: '5px 0'
                                }
                            })
                        ])
                    }
                },
                {
                    title: '状态',
                    width: 100,
                    align: 'center',
                    render: (h, params) => {
                        const { DeleteMark } = params.row
                        return h('div', [
                            h(
                                'span',
                                {
                                    style: {}
                                },
                                DeleteMark ? `禁用` : `正常`
                            )
                        ])
                    }
                },
                {
                    title: '操作',
                    width: 80,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h(
                                'Button',
                                {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        background: '#5ab1ef',
                                        border: 'none',
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.handleBtnClick(
                                                params.row,
                                                'edit'
                                            )
                                        }
                                    }
                                },
                                '修改'
                            )
                        ])
                    }
                }
            ]
        }
    },
    methods: {
        handleChange(html) {
            this.formItem.Detail = html
        },
        setImgLIst(list, value) {
            this.imglist[value] = list
        },
        /* 图片删除 */
        delImgList(list, value) {
            this.imglist[value] = list
        },
        /* 关闭对话框 */
        handleClose() {
            this.isModal = false
        },
        /* 提交 */
        handleSubmit(name) {
            console.log(this.formItem)

            this.$refs[name].validate(valid => {
                if (valid) {
                    if (this.imglist.YBCode && this.imglist.YBCode.length > 0) {
                        this.formItem.YBCode = this.imglist.YBCode[0].url
                    } else {
                        this.$Message.error('请上传图片')
                        return
                    }
                    let data = this.formItem
                    data.ParentID = 6
                    data.Dname =
                        data.Dname1 + '|' + data.Dname2 + '|' + data.Dname3
                    Api.addTablesItem(data).then(res => {
                        if (res.state == 'success') {
                            this.$Message.success('操作成功')
                            this.loading = true
                            this.isModal = false
                            this.getTablesListData()
                        } else {
                            this.$Message.error(res.message)
                        }
                    })
                }
            })
        },
        /* 供应商选择 */
        setDictionaries(item, value) {
            this.formItem[value] = item.ID + ' '
        },
        /* 表格数据请求 */
        getTablesListData() {
            const data = this.search
            Api.getTablesList(data).then(res => {
                this.list = res.data.rows
                this.loading = false
                this.total = res.data.records
            })
        },
        /* 表格查询 */
        handleSearch() {
            this.loading = true
            this.getTablesListData()
        },
        /* 对话框 */
        handleBtnClick(item, type) {
            this.ModalTitle = '新建软文分类'
            this.formItem = this.initFormItem()
            if (type == 'edit' || type == 'add') {
                this.imgDefaultList.YBCode = []
                this.imglist.YBCode = []
                this.itemId = 0
                if (type == 'edit') {
                    this.itemId = item.ID
                    this.ModalTitle = '修改软文分类'
                    this.isImg = false
                    this.imgDefaultList.YBCode = []
                    Api.getItemInfo({
                        id: item.ID
                    }).then(res => {
                        this.isModal = true
                        this.formItem = {
                            ...res.data
                        }
                        let Dname = this.formItem.Dname.split('|')
                        this.formItem.Dname1 = Dname[0]
                        this.formItem.Dname2 = Dname[1]
                        this.formItem.Dname3 = Dname[2]
                        this.imgDefaultList.YBCode.push({
                            url: res.data.YBCode
                        })
                        this.imglist.YBCode.push({
                            url: res.data.YBCode
                        })
                        this.isImg = true
                    })
                } else {
                    this.isModal = true
                }
            } else if (type === 'recovery') {
                if (this.allSelectArr) {
                    this.$Modal.confirm({
                        title: `你确定恢复吗`,
                        onOk: () => {
                            Api.recoverForm({
                                ids: this.allSelectArr
                            }).then(res => {
                                if (res.state == 'success') {
                                    this.$Message.success(res.message)
                                    this.allSelectArr = ''
                                } else {
                                    this.$Message.error(res.message)
                                }
                                this.getTablesListData()
                            })
                        },
                        onCancel: () => {
                            this.$Message.info('取消成功')
                        }
                    })
                } else {
                    this.$Message.error('请先选择需要操作的记录')
                }
            } else if (type === 'delete') {
                if (this.allSelectArr) {
                    this.$Modal.confirm({
                        title: `你确定要删除吗`,
                        onOk: () => {
                            Api.deleteItem({
                                ids: this.allSelectArr
                            }).then(res => {
                                if (res.state == 'success') {
                                    this.$Message.success(res.message)
                                    this.allSelectArr = ''
                                } else {
                                    this.$Message.error(res.message)
                                }
                                this.getTablesListData()
                            })
                        },
                        onCancel: () => {
                            this.$Message.info('取消成功')
                        }
                    })
                } else {
                    this.$Message.error('请先选择需要操作的记录')
                }
            }
        },
        /* 表单数据 */
        initFormItem() {
            return {
                ID: 0
            }
        },
        /* 表格分页方法 */
        handleChangePage(type, page) {
            this.loading = true
            if (type == 'page') {
                this.search.pageindex = page
                this.getTablesListData()
            } else {
                this.search.pagesizeize = page
                this.getTablesListData()
            }
        },
        /* 复选框选中 */
        handleAllSelect(list) {
            let arr = []
            for (let item in list) {
                arr.push(list[item].ID)
                arr.join(',')
            }
            arr = arr.join(',')
            this.allSelectArr = arr
        }
    },
    mounted() {
        /* 获取菜单的id */
        this.isAddBtn = true
        this.isEdit = true
        this.isDelete = true
        this.getTablesListData()
    }
}
</script>

<style>
</style>
